<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <meta content="" name="description">
    <meta content="" name="author">
    <title>用户列表</title>
    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../../../css/dashboard.css" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */
        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--顶部菜单 -->
    <div th:replace="twoGroup/twoGroup.html"></div>
        <main class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4" role="main">
            <h2><a class="btn btn-success btn-sm" href="#" th:href="@{/twoGroup/userinfo/toadduserinfo}">添加用户</a>
            </h2>
            <div class="table-responsive">
                <form action="#" method="get" th:action="@{/twoGroup/userinfo/userinfo}">
                    <label>姓名:<input name="name" th:value="${name}" type="text"/>&nbsp;
                        性别:<input name="sex" th:value="${sex}" type="text"/>&nbsp</label>
                    <button class="btn btn-success btn-sm" type="submit" value="搜索">搜索</button>
                </form>
                <table class="table table-sm table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>邮箱</th>
                        <th>地址</th>
                        <th>生日</th>
                        <th>加入时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="UserInfo:${UserInfo}">
                        <td th:text="${UserInfo?.id}"></td>
                        <td th:text="${UserInfo?.name}"></td>
                        <td th:text="${UserInfo?.sex}"></td>
                        <td th:text="${UserInfo?.age}"></td>
                        <td th:text="${UserInfo?.phone}"></td>
                        <td th:text="${UserInfo?.email}"></td>
                        <td th:text="${UserInfo?.address}"></td>
                        <td th:text="${#dates.format(UserInfo?.birthday,'yyyy-MM-dd')}"></td>
                        <td th:text="${UserInfo?.registrationDate}"></td>
                        <td class="center">
                            <a class="btn btn-success btn-sm" href="#" th:href="@{/twoGroup/userinfo/{id}(id=${UserInfo?.id})}">查看</a>
                            <a class="btn btn-info btn-sm" href="#" th:href="@{/twoGroup/userinfo/toupdata/{id}(id=${UserInfo?.id})}">修改</a>
                            <a class="btn btn-danger btn-sm" href="#" th:href="@{/twoGroup/userinfo/deleteUser/{id}(id=${UserInfo?.id})}">删去</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item">
                            <a aria-label="Previous" class="page-link"
                               href="#"
                               th:href="@{/twoGroup/userinfo/userinfo(pno=${page.navigateFirstPage},name=${name},sex=${sex})}">
                                <span aria-hidden="true">首页</span>
                            </a>
                        </li>
                        <li class="page-item" th:if="${page.hasPreviousPage}">
                            <a class="page-link" href="#"
                               th:href="@{/twoGroup/userinfo/userinfo(pno=${page.prePage},name=${name},sex=${sex})}">上页</a>
                        </li>
                        <li class="page-item" th:if="${page.hasNextPage}">
                            <a class="page-link" href="#"
                               th:href="@{/twoGroup/userinfo/userinfo(pno=${page.nextPage},name=${name},sex=${sex})}">下页</a>
                        </li>

                        <li class="page-item">
                            <a aria-label="Next" class="page-link"
                               href="#"
                               th:href="@{/twoGroup/userinfo/userinfo(pno=${page.navigateLastPage},name=${name},sex=${sex})}">
                                <span aria-hidden="true">末页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="../../../js/popper.min.js" type="text/javascript"></script>
<script src="../../../js/bootstrap.min.js" type="text/javascript"></script>

<!-- Icons -->
<script src="../../../js/feather.min.js" type="text/javascript"></script>
<script>
    feather.replace()
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</body>
<!-- Graphs -->
<script src="../../../js/Chart.min.js" type="text/javascript"></script>
<script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                lineTension: 0,
                backgroundColor: 'transparent',
                borderColor: '#007bff',
                borderWidth: 4,
                pointBackgroundColor: '#007bff'
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: false
                    }
                }]
            },
            legend: {
                display: false,
            }
        }
    });
</script>
<script>
    document.getElementById('addUserBtn').addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认的链接点击行为

        // 发送 PUT 请求
        fetch('/twoGroup/userinfo', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json' // 如果有请求体，确保正确设置 Content-Type
            },
            body: JSON.stringify({}) // 如果有请求体，将请求体对象转换为 JSON 字符串
        })
            .then(response => {
                // 处理响应
                if (response.ok) {
                    // 请求成功
                    console.log('添加用户成功');
                    // 这里可以进行页面跳转或其他操作
                } else {
                    // 请求失败
                    console.error('添加用户失败');
                }
            })
            .catch(error => {
                // 捕获网络错误等异常
                console.error('添加用户失败:', error);
            });
    });
</script>

</body>

</html>